<template>
  <div>
    <a-form ref="formRef" :model="searchForm">
      <a-row>
        <a-col :span="6" :offset="1">
          <a-form-item label="角色名称" name="roleName">
            <a-input
              v-model:value="searchForm.roleName"
              placeholder="请输入搜索内容"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-button type="primary" @click="search" class="d-a-center"
            >搜索</a-button
          >
        </a-col>
      </a-row>
    </a-form>
    <a-divider></a-divider>
    <a-button
      type="primary"
      size="medium"
      style="margin-bottom: 20px"
      @click="add"
      v-has="{ a: $route, b: 2 }"
      class="d-a-center"
      >新增角色</a-button
    >

    <a-table
      :columns="columns"
      :data-source="list"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :row-selection="rowSelection"
    >
      <template #isDele="{ record }">
        <div>{{ record.isDele == 0 ? "启用" : "禁用" }}</div>
      </template>
      <template #operation="{ record }">
        <a-button
          type="link"
          @click="edit(record.id)"
          v-has="{ a: $route, b: 2 }"
          >编辑</a-button
        >
        <a-button
          type="link"
          danger
          @click="del(record.id)"
          v-has="{ a: $route, b: 2 }"
          >删除</a-button
        >
      </template>
    </a-table>

    <!-- 编辑 -->
    <a-modal
      :destroyOnClose="true"
      v-model:visible="visible"
      :title="title"
      :footer="null"
      @cancle="cancle"
    >
      <a-form
        ref="editRef"
        :model="editForm"
        :rules="rules1"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="管理员" name="realName">
          <a-input
            placeholder="请输入管理员"
            v-model:value="editForm.realName"
          ></a-input>
        </a-form-item>
        <a-form-item label="岗位" name="jobName">
          <a-input
            placeholder="请输入岗位名称"
            v-model:value="editForm.jobName"
          ></a-input>
        </a-form-item>
        <a-form-item label="账号" name="account">
          <a-input
            placeholder="请输入登录手机号"
            v-model:value="editForm.account"
          ></a-input>
        </a-form-item>
        <a-form-item label="部门" name="departmentId">
          <a-select
            ref="select"
            v-model:value="editForm.departmentId"
            @change="handleChange"
            placeholder="请选择部门"
          >
            <a-select-option
              v-for="item in deparmentList"
              :value="item.id"
              :key="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="角色权限" name="roleId">
          <a-select
            ref="select"
            v-model:value="editForm.roleId"
            @change="handleChange"
            placeholder="请选择角色权限"
          >
            <a-select-option
              v-for="item in roleList"
              :value="item.id"
              :key="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="账号密码" name="password">
          <a-input
            placeholder="请输入登入密码"
            v-model:value="editForm.password"
          ></a-input>
        </a-form-item>
      </a-form>
      <a-row>
        <a-col :span="4" :offset="8" v-if="title !== '查看管理员'">
          <a-button type="primary" @click="save">保存</a-button>
        </a-col>
        <a-col :span="4" :offset="title == '查看管理员' ? 10 : 2">
          <a-button type="info" @click="cancle">关闭</a-button>
        </a-col>
      </a-row>
    </a-modal>
    <!-- 新增弹窗1212111212121212 -->
    <a-modal
      :width="1000"
      v-model:visible="addVisible"
      title="新增角色"
      :footer="null"
      :closable="false"
    >
      <div style="padding: 0 20px 20px 20px">
        <!-- 新增弹窗 -->
        <IndexEdit></IndexEdit>
      </div>
    </a-modal>
  </div>
</template>
<script>
import IndexEdit from "./indexEdit.vue";
import {
  reactive,
  ref,
  watch,
  computed,
  defineComponent,
  createVNode,
  toRefs,
} from "vue";
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import // {
//   selectAllAdmins,
//   selectOneAdmins,
//   addOrUpdateAdmins,
// }
* as api from "@/api/setting/index";
import {
  validatorPass,
  validtorConfirmPass,
  validatorPhone,
} from "@/assets/js/validate";
import { useModal } from "@/hooks"
export default {
  components: {
    IndexEdit,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const formRef = ref("");
    const form = reactive({});
    const data = reactive({
      searchForm: {},
      list: [], //管理员列表是
      id: "", //管理员ID
      editForm: { isDele: 0 },
      // 部门列表
      deparmentList: [],
      // 角色列表
      roleList: [],
    });
    const loading = ref(false);
    const visible = ref(false);
    const addVisible = ref(false); //添加
    const rules = {
      keyword: [{ required: true, message: "请输入查询内容" }],
    };
    // 表单验证
    const rules1 = {
      account: [
        {
          required: true,
          validator: validatorPhone,
          trigger: "blur",
        },
      ],
      password: [
        // {
        //   required: true,
        //   validator: validatorPass,
        //   trigger: "blur",
        // },
      ],
      password2: [
        { required: true, validator: validtorConfirmPass, trigger: "blur" },
      ],
      realName: [
        { required: true, message: "请输入管理员名称", trigger: "blur" },
      ],
    };
    const editRef = ref("");
    // const editForm = reactive({
    //   isDele: 0,
    // });
    const title = ref("新增管理员");
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });

    const columns = [
      {
        title: "角色名称",
        dataIndex: "roleName",
        className: "table",
        align: "center",
        sort: true,
      },
      {
        title: "角色描述",
        dataIndex: "roleDesc",
        className: "table",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        align: "center",
        fixed: "right",
        slots: {
          customRender: "operation",
        },
      },
    ];

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;

      // 请求列表接口
      init();
    };
    // 查询
    const search = () => {
      console.log(form, "表单内容");
      formRef.value
        .validate()
        .then(() => {
          page.current = 1;
          init();
        })
        .catch((error) => {});
    };
    // 停用
    const changeStatus = () => {
      const {closeModal} = useModal.confirm({
        title: "确定停用所选用户吗?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
      
      });
    };
    const cancle = () => {
      visible.value = false;
    };
    // const add = () => {
    //   console.log(1);
    //   // router.push({
    //   //   path: "/setting/role/index_edit",
    //   // });
    //   // console.log(1);
    // };
    //！！！！！添加
    const add = () => {
      // console.log(1);
      addVisible.value = true;
      // data.detailVisible = true; //弹窗
      // router.push({
      //   path: "/setting/role/index_edit",
      // });
    };
    // 查看
    const look = (e) => {
      // data.id = e;
      initDetail(e);
      title.value = "查看管理员";
      visible.value = true;
    };

    // 编辑
    const edit = (e) => {
      // data.id = e;
      // initDetail(e);
      // title.value = "编辑管理员";
      // visible.value = true;
      router.push({
        path: "/setting/role/index_edit",
        query: {
          id: e,
        },
      });
    };
    //  删除
    const del = (id) => {
      const {closeModal} = useModal.confirm({
        title: "确定删除当前管理员吗?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk: async () => {
          let res = await api.deleteRole({ id });
          init();
          closeModal()
        },

        
      });
    };
    const save = () => {
      console.log(data.editForm, "表单内容");
      editRef.value
        .validate()
        .then(async () => {
          let res = await api.addAdminInfo(data.editForm);
          if (res.success) {
            visible.value = false;
            init();
          }
        })
        .catch((error) => {});
    };
    const initDetail = async (id) => {
      let res = await selectOneAdmins(id);
      if (res.success) {
        data.editForm = res.object;
      }
    };

    init();
    // initData();
    // async function initData() {
    //   // 角色列表
    //   api.roleList().then( r => {
    //     data.roleList = r.object.list.map(r=> {
    //       r.name = r.roleName
    //       return r
    //     })
    //   })
    //   // 部门列表
    //   api.deparmentList().then( r => {
    //     data.deparmentList = r.object.map(r=> {
    //       r.name = r.departmentName
    //       return r
    //     })
    //   })
    // }
    async function init() {
      loading.value = true;
      let res = await api.roleList({
        pageSize: page.pageSize,
        pageNum: page.current,
        ...data.searchForm,
      });
      if (res.success) {
        res.object.list.map((el) => (el.key = el.id));
        data.list = res.object.list;
        page.total = res.object.total;
        loading.value = false;
      }
    }

    return {
      ...toRefs(data),
      addVisible,
      formRef,
      form,
      rules,
      columns,
      loading,
      pagination,
      handleTableChange,
      search,
      edit,
      look,
      del,
      changeStatus,
      editRef,
      // editForm,
      save,
      cancle,
      add,
      title,
      visible,
      labelCol: { style: { fontWeight: "bold", width: "100px" } },
      wrapperCol: { offset: 1 },
      rules1,
    };
  },
};
</script>
